<!DOCTYPE html>
<html>
<head>
    <title>Iframe switching</title>
</head>
<body>
<div id="log"></div>

<h1>Main page</h1>

<button id="btn">button</button>

<h2>Same-domain iframes</h2>

<iframe id="iframe" src="iframe.html" width="500px" height="300px"></iframe>
<iframe id="invisible-iframe" style="visibility: hidden;"></iframe>
<iframe name="long" id="slowly-loading-iframe" src="iframe.html?delay=1000" height="300px"></iframe>
<iframe id="too-slowly-loading-iframe" src="iframe.html?delay=10000"></iframe>

<script>
    document.getElementById('btn').addEventListener('click', function () {
        window.btnClickCount = (window.btnClickCount || 0) + 1;
    });
</script>

<h2>Without src iframes</h2>

<iframe id="iframe-without-src" height="200px"></iframe>
<button id="fill-iframe-without-src">Fill iframe without src</button>
<script>
    document.getElementById('fill-iframe-without-src').addEventListener('click', function () {
        const iframeDocument = document.getElementById('iframe-without-src').contentWindow.document;

        const btn = iframeDocument.createElement('button');

        btn.id          = 'btn';
        btn.textContent = 'button';
        iframeDocument.body.appendChild(btn);

        btn.addEventListener('click', function () {
            window.top.iframeWithoutSrcBtnClickCount = (window.top.iframeWithoutSrcBtnClickCount || 0) + 1;
        });
    });
</script>

<h2>Cross-domain iframes</h2>
<iframe id="cross-domain-iframe" height="200px"
        src="http://localhost:3001/fixtures/api/es-next/iframe-switching/pages/iframe.html"></iframe>

<h2>Iframes with the srcdoc attribute</h2>
<iframe id="iframe-with-srcdoc" height="200px"
        srcdoc="<h1 id='target'>text in iframe with the srcdoc attribute</h1>"></iframe>
</body>
</html>
